syaf
2:52pm
051002
Saturday
>BACK<
>HOME<
|
NOTE: I assume that you know basic knowledge of HTML and website designing for the following tutorial. If you would like to learn basic HTML tags please refer to the HTML section of the tutorial.
I was sent an email about how to make the custom coloured scroll bar. The programming language is basically in CSS embedded in the HEAD or between the <HEAD> and </HEAD> section (see basic html tags) of the HTML in your homepage. It controls and changes the colours of the scroll bar to your liking like changing the colour of your links. Below, I will explain briefly how you can do this by 'copy and paste' method and then editing a few parts of the source.
Below is the CSS source code for the custom scroll bar (that's what I refer it as).
<STYLE>
BODY {
scrollbar-3d-light-color:color;
scrollbar-arrow-color:color;
scrollbar-base-color:color;
scrollbar-dark-shadow-color:color;
scrollbar-face-color:color;
scrollbar-highlight-color:color;
scrollbar-shadow-color:color}
</STYLE>
|
Copy the codes in the above table and paste it in the HEAD section of your homepage. NOTE the 'color' text in italic. Those are the things that needs to be edited. Do not change anything else other than the ones in italic. Now go to the italic words and change them to your colour codes or just simply type the colour you want them to appear as. Do some experiment with it and preview it in your internet browser.
The tables below is what your it should look like after pasting and editing.
<HEAD>
<STYLE>
BODY {
scrollbar-3d-light-color:#125FA0;
scrollbar-arrow-color:#125FA0;
scrollbar-base-color:#000000;
scrollbar-dark-shadow-color:#125FA0;
scrollbar-face-color:#FF9900;
scrollbar-highlight-color:#FF9900;
scrollbar-shadow-color:#000000}
</STYLE>
</HEAD>
|
or simply in type the colour you want them to appear as...
<HEAD>
<STYLE>
BODY {
scrollbar-3d-light-color:blue;
scrollbar-arrow-color:red;
scrollbar-base-color:black;
scrollbar-dark-shadow-color:white;
scrollbar-face-color:blue;
scrollbar-highlight-color:red;
scrollbar-shadow-color:black}
</STYLE>
</HEAD>
|
I hope you have found this tutorial useful and that you have gained new knowledge to the world of website designing. For more information/questions/feedback/comments please email syaf.
|
